<template>
  <view class="elvis-region-warp" v-if="status" @touchmove.stop.prevent="moveHandle">
    <view class="elvis-region-mask" @click="maskClick"></view>
    <view class="elvis-region-content">
      <view class="elvis-content-title"
        >请选择所在地区
        <view class="elvis-content-confirm" @tap="close()">
          <!-- <text>关闭</text> -->
          <nut-icon name="close" custom-color="#333"></nut-icon>
        </view>
      </view>

      <view class="elvis-content-action">
        <view class="elvis-content-header">
          <view class="item" v-for="(item, index) in region" :key="index" @tap="onClickActive(item)"
            >{{ item.name }}
          </view>
        </view>
      </view>
      <view class="elvis-content-picker">
        <scroll-view class="picker-warp" scroll-y="true" :scroll-info-view="anchor.id">
          <view
            v-for="(item, index) in data"
            :key="index"
            :class="{ 'picker-item': true, active: anchor.code == item.code }"
            :id="item.code"
            @tap="onClickSelect(item)"
          >
            <view class="item">{{ item.name }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPostList } from '@/services/system'

export default {
  name: 'ElvisEegion',
  props: {
    address: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      status: false,
      data: [],
      region: {},
      anchor: {},
      regionDict: [],
    }
  },
  created() {
    // console.log(uni.getStorageSync('regionDict'))
    //缓存中若有地址列表
    if (uni.getStorageSync('regionDict')) {
      this.regionDict = JSON.parse(uni.getStorageSync('regionDict'))
    } else {
      uni.showLoading({
        title: '',
      })
      var that = this
      //获取地址编码列表
      getPostList()
        .then((res) => {
          uni.hideLoading()
          if (res) {
            that.regionDict = res
            uni.setStorageSync('regionDict', JSON.stringify(that.regionDict))
          } else {
            uni.showToast({
              title: '获取地址失败',
              icon: 'none',
            })
          }
        })
        .catch((e) => {
          uni.showToast({
            title: '获取地址失败',
            icon: 'none',
          })
        })
    }

    this.region = this.address
    for (let index in this.address) {
      this.anchor = this.address[index]
    }
    this._loadRegionData(undefined != this.anchor.parent ? this.anchor.parent : 0)
  },
  model: {
    prop: 'value',
    event: 'input',
  },
  methods: {
    //打开
    open() {
      this.status = true
      this._loadRegionData(undefined != this.anchor.parent ? this.anchor.parent : 0)
    },
    //关闭
    close() {
      this.status = false
    },
    moveHandle() {},
    //蒙版点击
    maskClick() {
      console.log('maskClick')
    },
    //点击item
    onClickSelect(item) {
      if (undefined != this.region[item.level] && this.region[item.level].code != item.code) {
        let data = {}
        for (let index in this.region) {
          if (index < item.level) {
            data[index] = this.region[index]
          }
        }
        this.region = data
      }
      this.anchor = item
      this.region[item.level] = item
      this._loadRegionData(item.code)

      if (this.data.length == 0) {
        this.close()
        this.$emit('input', this.region)
      }
    },
    //点击已选中
    onClickActive(item) {
      this.anchor = item
      this._loadRegionData(item.parent)
    },

    _loadRegionData(parent = 0) {
      this.data = []
      for (let index in this.regionDict) {
        if (this.regionDict[index].parent == parent) {
          this.data.push(this.regionDict[index])
        }
      }
    },
  },
}
</script>

<style lang="scss">
.elvis-region-warp {
  .elvis-region-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
  }

  .elvis-region-content {
    background-color: #fff;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    padding-top: 20rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70vh;
    z-index: 1000;

    .elvis-content-title {
      line-height: 12vw;
      color: #333;
      font-weight: bold;
      text-align: center;
      position: relative;

      .elvis-content-confirm {
        position: absolute;
        top: 0;
        right: 0;
        color: #54B9CC;
        height: 100%;
        padding: 0 4.267vw;
        fontsize: 3.733vw;
        box-sizing: border-box;
        background-color: transparent;
        border: none;
        cirsor: pointer;
      }
    }

    .elvis-content-action {
      position: relative;
      display: flex;
      height: 11.733vw;
      line-height: 11.733vw;
      width: 100%;
      padding: 0 4.267vw;
      box-sizing: border-box;
      background-color: #f5f5f5;

      .elvis-content-header {
        width: 100%;
        position: relative;
        display: flex;
        height: 11.733vw;
        line-height: 11.733vw;

        .item {
          font-size: 3.8vw;
          color: #444;
          width: auto;
          max-width: 25%;
          padding-right: 2vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          box-sizing: border-box;
        }
      }
    }

    .elvis-content-picker {
      width: 100%;
      height: calc(100% - 11.733vw);

      .picker-warp {
        width: 100%;
        height: 100%;

        .picker-item {
          position: relative;
          height: 11.733vw;
          line-height: 11.733vw;
          padding: 0 5.333vw;
          font-size: 3.733vw;
          color: #999;
          overflow: hidden;
        }

        .picker-item:not(:last-child)::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1rpx;
          background-color: transparent;
        }

        .active {
          color: #54B9CC;
        }

        .active::before {
          content: '✓';
          display: inline-block;
          position: absolute;
          right: 4vw;
          top: 15%;
          margin-top: -1.6vw;
          width: 4.8vw;
          height: 3.2vw;
        }
      }
    }
  }
}
</style>
